import { Dialog, Upload } from '@alifd/next';
import { CardProps } from '@alifd/next/types/card';
import { t } from '@lingui/macro';
import React, { useState } from 'react'

interface UploadCardProps extends CardProps {
  onRemove: () => void;
  onUploaded: (meta: any) => void;
}



export default function UploadCard({ binaryIds, prefix, suffix, onUploaded, onRemove, ...props }: UploadCardProps) {
  const [files, setFiles] = useState<any[]>([]);

  const handlePreview = ({ url, mimeType }) => {
    if (mimeType?.startsWith('image')) {
      Dialog.show({
        title: t`预览`,
        content: <img src={url} style={{ maxWidth: '800px', width: '100%', height: '100%', objectFit: 'cover' }} />,
        footer: false,
      });
    }
  };

  return (
    <Upload.Card
      listType="card"
      accept="image/png, image/bmp, image/jpg, image/jpeg"
      onPreview={handlePreview}
      // showDownload={false}
      // onChange={onChange}
      onSuccess={(f) => {
        onUploaded(f.response);
      }}
      onRemove={onRemove}
      // onError={onError}
      // reUpload
      // itemRender={itemRender}
      value={files}
      request={handleRequest}
      {...props}
    >
      <span>{t`点击上传`}</span>
    </Upload.Card>
  );
}
